<template>
	<view class="container">
		<view class="tui-order-item">
			<tui-list-cell padding="20rpx 30rpx" :hover="false" :lineLeft="false">
				<view class="tui-goods-title">
					<view>商品信息</view>
				</view>
			</tui-list-cell>
			<block>
				<tui-list-cell padding="0" @click="detail">
					<view class="tui-goods-item">
						<image v-if="detail.goods_image" :src="info.app.cdnurl+detail.goods_image"
							class="tui-goods-img"></image>
						<view class="tui-goods-center">
							<view class="tui-goods-name">{{detail.goods_title}}</view>
							<view class="tui-goods-attr" style="display: flex;" v-if="detail.goods_sku_text">
								<view class="" v-for="(item,index) in detail.goods_sku_text" :key="index">{{item}}
								</view>
							</view>
						</view>
						<view class="tui-price-right">
							<view>￥{{ detail.goods_price }}</view>
							<view>x{{ detail.goods_num }}</view>
						</view>
					</view>
				</tui-list-cell>
			</block>
		</view>
		<view class="tui-refund__form">
			<tui-list-cell :hover="false" padding="0" arrow>
				<view class="tui-line-cell">
					<view class="tui-title">
						<text class="tui-color__red">*</text>
						<text>申请类型</text>
					</view>

					<view class="uni-list-cell-db">
						<picker @change="bindPickerChange" :value="index" :range="reoList">
							<view class="uni-input">{{reoList[index]}}</view>
						</picker>
					</view>
				</view>
			</tui-list-cell>
			<tui-list-cell padding="0" arrow>
				<view class="tui-line-cell" @click="show = true">
					<view class="tui-title">
						<text class="tui-color__red">*</text>
						<text>申请原因</text>
					</view>
					<view class="uni-input" v-if="reason">{{reason}}</view>
					<view class="uni-input" v-else>请选择退款原因</view>
					
					
				</view>
			</tui-list-cell>
			<!-- <tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">
						<text class="tui-color__red">*</text>
						<text>退款金额</text>
					</view>
					<input placeholder-class="tui-phcolor" class="tui-input" type="text" value="￥596.00" disabled />
				</view>
			</tui-list-cell> -->

			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">
						<text class="tui-color__red">*</text>
						<text>联系方式</text>
					</view>
					<input placeholder-class="tui-phcolor" v-model="mobile" class="tui-input" type="text"
						placeholder="请输入您的联系电话" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">
						<text class="tui-color__red">*</text>
						<text>申请说明</text>
					</view>
					<input v-model="content" placeholder-class="tui-phcolor" class="tui-input" type="text"
						placeholder="请填写申请说明" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<tn-image-upload :header="header" @on-success="onSuccess" :formData="formData" :action="action"
						:fileList="fileList" :maxCount="9"></tn-image-upload>
				</view>
			</tui-list-cell>
		</view>
		<view class="tui-btn__box">
			<tui-button height="88rpx" type="danger" shadow shape="circle" @click="submit">提交申请</tui-button>
		</view>



		<tn-action-sheet v-model="show" :list="list" @click="click"></tn-action-sheet>
	</view>
</template>

<script>
	import {
		getOrderAftersaleAdd
	} from "@/apis/index"
	import {
		getToken
	} from "@/util/auth"
	export default {
		data() {
			return {
				list: [{
					text: '卖家发错货了'
				}, {
					text: '退运费'
				}, {
					text: '大小/重量与商品描述不符'
				}, {
					text: '生产日期/保质期与商品描述不符'
				}, {
					text: '质量问题'
				}, {
					text: '我不想要了'
				}],
				show: false,
				reoList: ['仅退款', '退/换货', '其他'],
				typeList: ['refund', 'return', 'other'],
				index: 0,
				// 演示地址，请勿直接使用
				action: 'https://www.taoding1688.com/api/common/upload',
				fileList: [],
				header: {
					'token': getToken()
				},
				formData: {
					'group': 'ugc', // 其他要传的参数
				},
				detail: {},
				imgList: [],
				mobile: '',
				reason: '',
				content: ''
			};
		},
		onLoad(option) {
			if (option.detail) {
				this.detail = JSON.parse(option.detail);
			}
		},
		methods: {
			submit() {
				let arr = this.imgList.map(item => {
					return [item.response.data.url]
				})
				let order_item_id = this.detail.id
				// let type = this.typeList[this.index]
				// let reason = this.list[this.index].text
				// let mobile = '123456789'
				// let remark = '申请说明'
				// let images = arr

				if (!this.content) {
					uni.showToast({
						title: '请填写申请说明',
						icon: 'none'
					})
					return
				}
				if (!this.reason) {
					uni.showToast({
						title: '请选择退款原因',
						icon: 'none'
					})
					return
				}
				if (!this.mobile) {
					uni.showToast({
						title: '请填写手机号',
						icon: 'none'
					})
					return
				}


				let obj = {
					content: this.content,
					images: arr,
					mobile: this.mobile,
					order_id: this.detail.order_id,
					order_item_id: this.detail.id,
					reason: this.reason,
					type: this.typeList[this.index]
				}
				getOrderAftersaleAdd(obj).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.code == 1) {
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}
				})
				// this.$http.post('order/refund',obj).then(res=>{
				// 	console.log(res)
				// 	if(res.code==200){
				// 		uni.showToast({
				// 			title:res.msg,
				// 			icon:'none'
				// 		})
				// 		setTimeout(()=>{
				// 			uni.navigateBack()
				// 		},1000)
				// 	}
				// })
			},
			click(index) {
				this.reason = this.list[index].text
			},
			bindPickerChange: function(e) {
				this.index = e.detail.value
			},
			onSuccess(data, index, lists, indexs) {
				this.imgList = lists
			}
		}
	};
</script>

<style>
	.tui-order-list {
		margin-top: 80rpx;
	}

	.tui-order-item {
		margin-top: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.tui-goods-title {
		width: 100%;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-goods-item {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.tui-goods-img {
		width: 180rpx;
		height: 180rpx;
		display: block;
		flex-shrink: 0;
	}

	.tui-goods-center {
		flex: 1;
		padding: 20rpx 8rpx;
		box-sizing: border-box;
	}

	.tui-goods-name {
		max-width: 310rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 26rpx;
		line-height: 32rpx;
	}

	.tui-goods-attr {
		font-size: 22rpx;
		color: #888888;
		line-height: 32rpx;
		padding-top: 20rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-price-right {
		text-align: right;
		font-size: 24rpx;
		color: #888888;
		line-height: 30rpx;
		padding-top: 20rpx;
	}

	.tui-refund__form {
		margin-top: 20rpx;
	}

	.tui-line-cell {
		width: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-title {
		width: 180rpx;
		font-size: 28rpx;
		color: #666;
	}

	.tui-color__red {
		color: #EB0909;
		padding-right: 6rpx;
	}

	.tui-title-city-text {
		width: 180rpx;
		height: 40rpx;
		display: block;
		line-height: 46rpx;
	}

	.tui-input {
		width: 500rpx;
		font-size: 28rpx;
	}

	.tui-phcolor {
		color: #ccc;
		font-size: 28rpx;
	}

	.tui-btn__box {
		padding: 60rpx 30rpx;
	}
</style>